<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../src/lib/layui/css/layui.css">
    <link rel="stylesheet" href="../src/css/index.css">
</head>

<body>
    <!-- 头部 -->
    <div id="head"></div>  
    <!-- 轮播 -->
    <div class="layui-carousel" id="test1" style="height: 480px;">
        <div carousel-item>
            <div><img src="../src/imgs/2c0b6f6e574c8a9e89d747a5bb4095ec.jpg" alt=""></div>
            <div><img src="../src/imgs/2b4833495b5b47dedeaf62e4a2a669b3.jpg " alt=""></div>
            <div><img src="../src/imgs/fd74391b0ad49831ca494706df238f21.jpeg" alt=""></div>
            <div><img src="../src/imgs/9c42ed8256ced766b7e481904e3ad7fa.jpg" alt=""></div>
        </div>
    </div>
    <!-- 内容 -->
    <div class="content">
        <div class="menu">
            <a href=""><img src="../src/imgs/bc369fca5990e32df765d24e08221112.jpg" alt=""></a>
            <a href=""><img src="../src/imgs/9d85677ea56806bff908c431f7c764f7.jpg" alt=""></a>
            <a href=""><img src="../src/imgs/43a4c974312a2be97a1d0d6616c3ab23.jpg" alt=""></a>
            <a href=""><img src="../src/imgs/9e3f7fdd852d1b35f318076e3575412c.jpg" alt=""></a>
            <a href=""><img src="../src/imgs/37752f6805d166b02e011c3b5c3b4972.png" alt=""></a>
        </div>
        <div class="top_banner">
            <h4>新品<span>/</span><span>专区</span></h4>
            <img src="../src/imgs/83db96358514ac6ecade4f142c2c5750.jpg" alt="">
        </div>
        <div class="list-box">
            <ul>
                <a href="">
                    <li>
                        <img src="../src/imgs/8e5930873714d422476417759b01e4b8.png" alt="">
                        <a href="">
                            <h5>蔓生</h5>
                        </a>
                        <a href="">
                            <p>树莓奶油与浆果慕斯蛋糕</p>
                        </a>
                        <div class="tag-list"><a href="">新品></a></div>
                        <div class="cart-info"><span>¥198.00/454g(1.0磅)</span><a href="">加入购物车</a></div>
                    </li>
                </a>
                <a href="">
                    <li><img src="../src/imgs/0323f5c730fe9c741206890107f030d5.png" alt="">
                        <a href="">
                            <h5>豆酪</h5>
                        </a>
                        <a href="">
                            <p>专为儿童研发的豆腐芝士流心蛋糕</p>
                        </a>
                        <div class="tag-list"><a href="">儿童></a><a href="">新品></a></div>
                        <div class="cart-info"><span>¥298.00/454g(1.0磅)</span><a href="">加入购物车</a></div>
                    </li>
                </a>
                <a href="">
                    <li><img src="../src/imgs/c08f540d4088cd0b6e65da8302f6afdd.png" alt="">
                    <a href="">
                        <h5>「新」杰瑞</h5>
                    </a>
                    <a href="">
                        <p>芝士与坚果的完美融合</p>
                    </a>
                    <div class="tag-list"><a href="">儿童></a><a href="">聚会></a><a href="">新品></a></div>
                    <div class="cart-info"><span>¥198.00/454g(1.0磅)</span><a href="">加入购物车</a></div>
                    </li>
                </a>
                <a href="">
                    <li><img src="../src/imgs/2d86295cc4f0b803fad9a07156887f7d.png" alt="">
                    <a href="">
                        <h5>松仁淡奶（木糖醇）</h5>
                    </a>
                    <a href="">
                        <p>轻松吃的木糖醇松子蛋糕</p>
                    </a>
                    <div class="tag-list"><a href="">长辈></a><a href="">新品></a></div>
                    <div class="cart-info"><span>¥198.00/454g(1.0磅)</span><a href="">加入购物车</a></div>
                    </li>
                </a>
            </ul>
        </div>
    </div>
    <!-- </div> -->
    <!-- 底部 -->
<div id="foot"></div>


</body>
<script src="../src/lib/jquery-1.11.3.js"></script>
<script src="../src/lib/layui/layui.js"></script>
<script src="../src/js/index.js"></script>
<!-- <script>
    $('#head').load('../tou/head.html')
    $('#foot').load('../tou/foot.html');
</script> -->
<script>
   
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        carousel.render({
            elem: '#test1'
            , width: '100%'
            , arrow: 'hover'
            , interval: 1000
        });
    });
</script>

</html>